import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:jd_flutter/base/utils/jd_log.dart';
import 'package:jd_flutter/dart_learn/detail_page.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: const UIDemo(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: const Text(
        'hello flutter',
        style: TextStyle(
            // 文字颜色
            color: Colors.red,
            // 文字大小
            fontSize: 40.0,
            // 粗体
            fontWeight: FontWeight.bold),
      ),
    );
  }
}

class UIDemo extends StatefulWidget {
  const UIDemo({super.key});

  @override
  State<UIDemo> createState() => _UIDemoState();
}

class _UIDemoState extends State<UIDemo> {
  @override
  void initState() {
    super.initState();
    print('UIDemo initState--------->');
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('UIDemo didChangeDependencies--------->');
  }

  @override
  void deactivate() {
    super.deactivate();
    print('UIDemo deactivate---------->');
  }

  @override
  void dispose() {
    super.dispose();
    print('UIDemo dispose---------->');
  }

  String showString = '点击前';

  @override
  Widget build(BuildContext context) {
    print('UIDemo build--------->');

    return ListView(
      children: [
        GestureDetector(
          onTap: () {
            jdLog('点击事件');
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => const DetailPage(
                        params: {'data': '11'},
                      )), // 第二个页面的Widget
            );
          },
          child: Container(
            width: 200,
            height: 40,
            margin: const EdgeInsets.fromLTRB(20, 50, 0, 0),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              // 容器背景色
              color: Colors.red,
              // 圆角
              borderRadius: const BorderRadius.all(Radius.circular(9)),
              // 边框
              border: Border.all(color: Colors.blue, width: 2),
            ),
            child: const Text('点击跳转页面'),
          ),
        ),
        TextButton(
          child: Text(showString),
          onPressed: () {
            setState(() {
              showString = '点击后';
            });
          },
        ),
        const SizedBox(
          width: 0,
          height: 50,
        ),
        Image.asset(
          'assets/images/ic_launcher.png',
          width: 100,
          height: 100,
          fit: BoxFit.cover,
          color: Colors.blue,
        ),
        const SizedBox(
          width: 0,
          height: 50,
        ),
        TextButton(
            onPressed: () {
              jdLog('TextButton点击事件');
            },
            child: const Text('我是TextButton按钮')),
        const SizedBox(
          width: 0,
          height: 50,
        ),
        TextField(
            onChanged: (text) {
              print(text);
            },
            decoration: InputDecoration(
              fillColor: Colors.grey.withOpacity(0.5),
              filled: true,
              contentPadding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
              hintText: '我是文本输入框',
              hintStyle: const TextStyle(fontSize: 16),
            )),
        const SizedBox(
          width: 0,
          height: 50,
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(24, 0, 24, 0),
          child: Text.rich(
            TextSpan(text: '为了更好地体验xxxx服务，请查看并同意', children: [
              TextSpan(
                  text: '《用户协议》',
                  recognizer: TapGestureRecognizer()..onTap = () {},
                  style: const TextStyle(color: Colors.blue, fontSize: 22)),
              const TextSpan(text: '和'),
              TextSpan(
                text: '《隐私政策》',
                recognizer: TapGestureRecognizer()..onTap = () {},
                style: const TextStyle(color: Colors.blue, fontSize: 22),
              ),
              const TextSpan(text: '请查看并同意请查看并同意请查看并同意请查看并同意'),
            ]),
            style: const TextStyle(color: Colors.black, fontSize: 20),
          ),
        ),
        const SizedBox(
          width: 0,
          height: 50,
        ),
        Row(
          // 可以改mainAxisAlignment crossAxisAlignment 属性来看效果
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 70,
              height: 70,
              color: Colors.yellow,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
          ],
        ),
        const SizedBox(
          width: 0,
          height: 50,
        ),
        Row(
          // 可以改mainAxisAlignment crossAxisAlignment 属性来看效果
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Expanded(
                child: Container(
              width: 70,
              height: 70,
              color: Colors.yellow,
            )),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
          ],
        ),
        const SizedBox(
          width: 0,
          height: 50,
        ),
        Stack(
          children: [
            Container(
                color: Colors.red,
                width: 200,
                height: 200,
                child: const Icon(Icons.add)),
            Container(
                color: Colors.yellow,
                width: 100,
                height: 100,
                child: const Icon(Icons.timelapse)),
            Container(
                color: Colors.blue,
                width: 50,
                height: 50,
                child: const Icon(Icons.error)),
          ],
        ),
        const SizedBox(
          width: 0,
          height: 50,
        ),
        const Text(
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
            '防静电上课了甲方都课了甲方都是垃圾课了甲方都'
            '是垃圾课了甲方都是垃圾是垃圾放大'
            '收垃圾发啦生发剂到拉萨电极法手打拉法基送达了'),
        const SizedBox(
          width: 0,
          height: 50,
        ),
      ],
    );
  }
}
